<template>
	<view class="login_box">
		<view class="login_title">
			<view class="title1">背单词APP</view>
			<view class="title2">首次登录手机号将在验证后生成新账号</view>
		</view>
		<view class="form_box">
			<view class="form_title">登录</view>
			<view class="form_item flex_ac_js">
				<view class="flex_ac">
					<image src="@/static/images/icon/account.svg"></image>
					<text style="margin: 0 20rpx;">(+86)</text>
				</view>
				<input v-model="form.telNumber" placeholder="手机号" type="number" maxlength="11" style="width: calc(100% - 96rpx);" />
				<view class="form_item_num">{{ phoneNum }}/11</view>
			</view>
			<view class="flex_ac_js" style="margin-top: 80rpx;">
				<view class="form_item flex_ac_js" style="width: calc(100% - 260rpx);">
					<image src="@/static/images/icon/code.svg"></image>
					<input v-model="form.smsCode" placeholder="验证码" type="number" maxlength="6" style="margin-left: 20rpx;" />
					<view class="form_item_num">{{ codeNum }}/6</view>
				</view>
				<button class="form_item_code" @tap="sendCode" :disabled="counting">{{counting ? `${count}秒` : '验证码'}}</button>
			</view>
			
			<view class="form_button" @tap="getLogin">登 录</view>
			<view class="form_tips flex_ac">
				<checkbox-group @change="checkboxChange">
					<label class="flex_ac">
						<checkbox color="#0000ff" style="transform:scale(0.7)"></checkbox>
						<view class="tips">我已阅读并同意</view>
					</label>
				</checkbox-group>
				<view class="tips">
					<text>用户协议</text>
					和
					<text>隐私政策</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userLogin, getCode } from '@/api/login/login.js'
	export default {
		data() {
			return {
				form: {
					telNumber: '',
					smsCode: ''
				},
				codeNum: 0,
				phoneNum: 0,
				counting: false,
				count: 60,
				isDisabled: true,
				isAgree: false,
			}
		},
		onUnload() {
			uni.hideLoading()
		},
		watch: {
			'form.telNumber': function (newVal, oldVal) {
				this.phoneNum = newVal.length
			},
			'form.smsCode': function (newVal, oldVal) {
				this.codeNum = newVal.length
			},
		},
		methods: {
			uniShowToast(title, icon) {
				uni.showToast({
					title,
					icon
				})
			},
			sendCode() {
				let that = this
				if(this.counting) return;
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.form.telNumber)) {
					that.uniShowToast('请输入正确的手机格式', 'none')
					return;
				}
				this.getCaptcha()
				
				// try {
				// 	let res = await this.getCaptcha()
				// 	if (res.code == 0) {
				// 		uni.showToast({
				// 			title: '验证码发送成功',
				// 			icon: 'none'
				// 		})
				// 	}
				// } catch (err) {
					
				// }
			},
			async getCaptcha() {
				let that = this
				try {
					const { code } = await getCode(this.form.telNumber)
					if (code === 200) {
						that.uniShowToast('发送成功', 'success')
						that.counting = true;
						const timer = setInterval(() => {
							that.count --;
							if (that.count <= 0) {
								that.counting = false;
								that.count = 60;
							}
						}, 1000)
					}
				} catch(err) {
					console.log(err);
				}
			},
			checkboxChange(e) {
				if(e.detail.value.length !== 0) {
					this.isAgree = true
				}
			},
			async getLogin() {
				if(!this.form.telNumber) return this.uniShowToast('请输入手机号码', 'none')
				if(!this.form.smsCode) return this.uniShowToast('请输入验证码', 'none')
				if(!this.isAgree) return this.uniShowToast('请勾选协议', 'none')
			try {
				const { code, data } = await userLogin(this.form)
				if (code === 200) {
					let token = data.tokenType + ' ' + data.accessToken
					uni.setStorageSync('token', token)
					
					// uni.showLoading({
					// 	title: '登录中，请耐心等待...',
					// 	mask: true
					// })
					
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						})
						uni.hideLoading()
					}, 2000)
				}
			} catch (err) {
				uni.showToast({
					title: err,
					icon: 'none'
				})
			}
			}
		}
	}
</script>

<style scoped lang="scss">
.login_box {
	height: 100vh;
	background: linear-gradient(to bottom, #0267ff, #d2d2d3);
	padding: 50rpx;
	box-sizing: border-box;
	
	.login_title {
		margin-top: 120rpx;
		text-align: center;
		
		.title1 {
			color: #ffffff;
			font-size: 52rpx;
			font-weight: bold;
		}
		.title2 {
			color: #000000;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}
	
	.form_box {
		background-color: #ffffff;
		margin-top: 30rpx;
		border-radius: 12rpx;
		padding: 75rpx 30rpx;
		
		.form_title {
			margin-bottom: 50rpx;
			text-align: center;
			font-size: 48rpx;
		}
		
		.form_item {
			// width: 100%;
			height: 100rpx;
			border-bottom: 2rpx solid #000;
			position: relative;
			
			image {
				width: 52rpx;
				height: 52rpx;
			}
			
			.form_item_num {
				position: absolute;
				bottom: -48rpx;
				right: 0;
				font-size: 24rpx;
			}
		}
		
		.form_item_code {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #0000ffb0;
			background-color: #ffffff;
			box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.34901960784313724);
			border-radius: 50rpx;
			border: 0;
			margin: 0;
			background: 0;
			font-size: 28rpx;
			
			&::after {
				border: 0;
			}
		}
		
		.form_button {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 120rpx auto 0;
			text-align: center;
			background-color: #2525bc;
			border-radius: 50rpx;
			color: #ffffff;
			box-shadow: 2rpx 4rpx 16rpx #878787;
		}
		
		.form_tips {
			margin-top: 20rpx;
			font-size: 24rpx;
			
			.tips {
				color: $uni-text-color;
				
				text {
					color: #0000ff;
					margin: 0 4rpx;
				}
			}
		}
	}
}
</style>
